<template>
    <s-box title="技术发展历程" initname="c_history" ref="loading">
        <div class="trend-time"  slot="header">
          <Select class="select-top" v-model="category" @on-change="_initChart">
            <Option v-for="item in categoryList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </div>
        <div class="chart-box">
          <div class="chart-wrap" ref="chart"></div>
        </div>
    </s-box>
</template>
<script>
import delegate from '../js/event.js';
import echarts from "echarts";
import data2 from "./guanxi.json";
import timeshistory from './timehistory.js'
import mixin from '../js/mixin.js';
export default {
    mixins:[mixin],
    data() {
        return {
          category:'all',
          categoryList: [
            {
              value: 'all',
              label: '综合'
            },
            {
              value: 'news',
              label: '新闻动态'
            },
            {
              value: 'paper',
              label: '论文'
            },
            {
              value: 'patent',
              label: '专利'
            },
          ],
        }
    },
    beforeDestroy(){
         // 解除事件绑定
         delegate.$off('s-resize',this._initChart);
         delegate.$off('s-search',this._search);
         timeshistory.destroyed();
    },
    mounted(){
        this._initMethod();
    },
    methods: {
        _initMethod() {
            delegate.$on('s-search',this._search)
            delegate.$on('s-resize',this._initChart)
        },
        _search(){

        },
        _getTechnologyDevelopmentCours(){

            if(!this.navCurrentId) return;
            this.api({
                    url: "newtechanalyse/technologyDevelopmentCours",
                    method: "post",
                    data:`topicId=${this.navCurrentId}${this.category == 'all' ? '': '&category='+this.category }`
            }).then(data => {
                this.$refs.loading.hide();
                let coursedataArr = [];
                data.courses.map(function(course) {
                    var coursedata =  {
                        year: course.publishyear,
                        text: course.title
                    };
                    coursedataArr.push(coursedata);
                });

               this.chart.setOption({
                   year:data.years,
                   data:coursedataArr
               });

            }).catch((error) =>{ this.$refs.loading.hide()})
        },
        _initChart(){
          this.$refs.loading.show();
           this.$nextTick(()=>{
               if(!this.chart){
                 this.chart = timeshistory.init(this.$refs.chart);
               }
               this.chart.setOption({year:[],data:[]});
               this._getTechnologyDevelopmentCours();
           })
        }
    },
}
</script>
<style lang="scss" scoped>

  .chart-box{
    position: relative;
    padding-top: 38.9%;
  }
  .chart-wrap{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
</style>
